import {Tabs, Button, Form, Input, Row, Col, Space, Radio} from 'antd'
import React, {useState, useEffect} from 'react'
import http from '../../../../utils/http'

const {TabPane} = Tabs

// 2.编辑价格库存组件
const PriceInventory = ({setdefaultActiveKey, isEdit}) => {
  let [editData, seteditData] = useState({})
  useEffect(() => {
    if (isEdit) {
      let editData1 = JSON.parse(sessionStorage.getItem('editData'))
      seteditData(editData1)
    }
  }, [])

  // 表格组件
  const FormPrice = () => {
    const [formPrice] = Form.useForm()
    // 提交按钮
    const submit = () => {
      formPrice.validateFields().then(values => {
        console.log(values)
        sessionStorage.setItem('addPriceInventory', JSON.stringify(values))
      }).catch(err => {
        console.log(err)
      })

    }
    // 下一步
    const next = () => {
      setdefaultActiveKey('3')
    }
    // 上一步
    const goAhead = () => {
      setdefaultActiveKey('1')
    }

    useEffect(() => {
      if (isEdit) {
        console.log(editData)
        formPrice.setFieldsValue({
          "radio-group": editData.shelf + '',
          cost_price: editData.cost_price,
          supply_price: editData.supply_price,
          sell_price: editData.sell_price,
          stoke: editData.stoke
        })
      }
    }, [])

    return (
      <>
        <Form
          labelAlign="center"
          form={formPrice}
          labelCol={{span: 5}}
          wrapperCol={{span: 10}}
        >
          <Form.Item label="商品货号" name='radio-group' disabled={isEdit ? true : false}>
            <Radio.Group>
              <Radio value="0">无</Radio>
              <Radio value="1">多规格商品</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="商品成本价" name='cost_price'>
            <Input placeholder="请输入商品成本价" />
          </Form.Item>

          <Form.Item name='supply_price' label="商品供货价" >
            <Input placeholder="请输入商品供货价" />
          </Form.Item>

          <Row>
            <Col offset={5} className='prompt'>
              所有设置商品供货价包含快递费用（快递费用不另算，请注意合理价格）
            </Col>
          </Row>
          <Form.Item label="商品售价" name='sell_price' style={{marginTop: '16px'}}>
            <Input placeholder="请输入商品售价" />
          </Form.Item>

          <Form.Item name='stoke' label="建议库存">
            <Input placeholder="请输入建议库存" />
          </Form.Item>

          <Row>
            <Col offset={5} className='prompt'>
              库存为 0 时，商品会自动下架，且无法上架商品
            </Col>
          </Row>

          <Space size="large" className='opeart'>
            <Button type="default" onClick={goAhead}>上一步</Button>
            <Button type="primary" onClick={submit}>保存</Button>
            <Button type="default" onClick={next}>下一步</Button>
          </Space>
        </Form>
      </>
    )
  }



  return (
    <div className='priceInventory'>
      <div className='tit'>价格库存</div>
      <FormPrice></FormPrice>

    </div>
  )
}

export default PriceInventory